<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <ul>
      <li v-for="(p,index) in persons" :key="p.id">
        <button @click="deleteP(index)">删除</button>--
        <button @click="replaceP(index, {id: Date.now(), name: 'AAA', age: 23})">替换</button>--
        {{index+1}}: {{p.id}} -- {{p.name}} -- {{p.age}}
      </li>
    </ul>
    
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: "#test",
      data: {
        persons: [
          {id: 3, name: 'Tom', age: 14},
          {id: 5, name: 'Jack', age: 15},
          {id: 7, name: 'Bob', age: 13},
        ]
      },

      methods: {
        // 删除指定下标的数组元素
        deleteP (index) {
          // vue重写splice方法, 内部会删除元素后更新DOM
          this.persons.splice(index, 1)

          // 界面不会自动更新: vue没有重写filter方法, 它也没有改变元素啊
          // this.persons.filter((p, i) => i!=index) 

          // 界面会自动更新: persons有setter方法
          // this.persons = this.persons.filter((p, i) => i!=index)
        },

        // 替换元素
        replaceP (index, newP) {
          // 通过数组方法来更新元素
          // this.persons.splice(index, 1, newP)

          // 通过下标更新元素
          this.persons[index] = newP
        }
      }
    })

    console.log(vm.$data.persons)
    /* 
    更新响应式数组元素
      只能通过数组的方法来更新, 界面才会自动更新
      如果通过下标来更新, 界面不会自动更新
    为什么啊?  vue内部如何知道/监视到元素变化?
      重写(重新实现)数组更新元素的7个方法(push/unshift/pop/shift/splice/sort/reverse)
        第一步: 调用原生的对应方法, 对元素进行相应的操作
        第二步: 立即去更新DOM
      这就要求: 我们只能通过这7个重写的方法更新元素, 界面才会自动更新
            而通过下标更新元素, vue根本就不知道, 界面就不会自动更新
    */
  </script>
</body>
</html>